import React from 'react';
import './PanelListTotal.scss'

interface ListTotalProps {
  data: Array<DataProps>,
  width?: string, // 宽度 若要撑满全屏 vw85 即可
  htmlProps?: object, // 标签原生属性
  onClick?: React.MouseEventHandler<HTMLDivElement>,
}

interface DataProps {
  title: string, // 标题
  value: number, // 内容
  backgroundColor?: string, // 背景颜色
  color?: string, // 字体颜色
  addonTextAfter?: string, // 后缀文本
  UC?: number, // 单位换算 比例
  cssStyle?: object,
}

/**
 * 列表顶部汇总数据通用组件
 * @param props
 * @returns
 */
export default function PanelListTotal(props: ListTotalProps) {
  const { data, width, htmlProps, onClick } = props;
  return (
    <div className='list_container' style={{ width }} {...htmlProps}>
      {data.map((item, i) => {
        const { title, value = 0, backgroundColor, color, addonTextAfter, UC = 100, cssStyle = {} } = item;
        return (
          <div className='item' key={title} onClick={() => onClick?.(i)} style={{ backgroundColor: backgroundColor || `var(--color-data1-${i + 1})` }} {...cssStyle}>
            <div>{title}</div>
            <div style={{ color }}>
              <span className='item-span'>{UC ? (value / UC).toFixed(2) : value}</span>
              {addonTextAfter && <span>{` ${addonTextAfter}`}</span>}
            </div>
          </div>)
      })}
    </div>
  )
}
